<template>
  <div class="coupon_scan_share_index">
    <c-title :hide="false" text="我的优惠券码分享"></c-title>
    <template v-if="noneCoupon">
      <div class="codeBox">
        <div class="code">
          <img :class="[info.status == '-1' || info.status == '2' ? 'disable' : '']" v-if="info.code_url" :src="info.code_url" alt="" />
        </div>
        <div class="tips" v-if="info.status == 2">该二维码已被领取</div>
        <div class="tips" v-if="info.status == '-1'">二维码已经失效</div>
        <div class="stxt" v-if="info.status == 1">长按二维码分享给好友</div>
        <div class="btn" v-if="info.status == '-1' || info.status == '2'" @click="getNewCode">生成二维码</div>
      </div>
      <div class="list" v-if="info.coupon">
        <div class="pos">{{ info.member_coupon_count }}张</div>
        <div class="list_left">
          <template v-if="info.coupon.coupon_method == 1">
            <div class="price">
              <span class="small">¥</span>
              {{ parseFloat(info.coupon.deduct) }}
            </div>
            <div class="rule">满{{ info.coupon.enough }}元可用</div>
          </template>
          <template v-if="info.coupon.coupon_method == 2">
            <div class="price">
              {{ parseFloat(info.coupon.discount) }}
              <span class="small">折</span>
            </div>
            <div class="rule">满{{ info.coupon.enough }}立享受</div>
          </template>
        </div>
        <div class="list_right">
          <div class="text">{{ info.coupon.name }}</div>
          <div class="coupon_type">{{ info.coupon.coupon_type_name }}</div>
        </div>
      </div>
    </template>
    <van-empty v-else class="custom-image" image="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/noneCoupon%402x.png" description="没有设置指定优惠券" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: [],
      noneCoupon: true
    };
  },
  activated() {
    // this.$toast.success("飒飒大")
    this.noneCoupon = true;
    this.getData();
  },
  methods: {
    getData() {
      $http.get("plugin.coupon-scan-share.frontend.controllers.index.index", {}, "正在获取").then(response => {
        if (response.result == 1) {
          this.info = response.data;
          if(this.info.status == '-2'){
            this.noneCoupon = false;
          }
        } else {
          this.$dialog.alert({ message: response.msg });
          this.noneCoupon = false;
        }
      });
    },
    getNewCode() {
      $http.get("plugin.coupon-scan-share.frontend.controllers.index.create-code", {}, "正在获取").then(response => {
        if (response.result == 1) {
          // console.log(this.info);
          // this.info.status = 1;
          this.getData();
        } else {
          this.$dialog.alert({ message: response.msg });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  margin: 0.63rem 0.75rem;
  display: flex;
  justify-content: space-between;
  padding: 0.66rem 0;
  background: #ffffff;
  border-radius: 0.63rem;
  position: relative;
  .pos {
    width: 1.94rem;
    height: 1.13rem;
    background: #f15353;
    border-radius: 0.63rem 0rem 0.5rem 0rem;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.75rem;
    color: #ffffff;
  }
  .list_left {
    flex-shrink: 0;
    width: 6.78rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .price {
      display: flex;
      align-items: flex-end;
      font-size: 1.5rem;
      color: #ec2b2b;
      font-weight: bold;
      .small {
        font-size: 0.6rem;
        font-weight: 400;
        margin-bottom: 0.2rem;
      }
    }
    .rule {
      font-size: 0.75rem;
      color: #ec2b2b;
    }
  }
  .list_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 4.63rem;
    padding-left: 0.72rem;
    position: relative;
    .text {
      font-size: 0.88rem;
      font-weight: bold;
      color: #00001c;
    }
    .coupon_type {
      margin-top: 0.59rem;
      font-size: 0.75rem;
      color: #ec2b2b;
      background: #fef1f1;
      padding: 0.19rem 0.31rem;
      border-radius: 0.31rem;
    }
  }
  .list_right::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: 1px;
    height: 100%;
    border-left: 1px dashed #d6d6dc;
  }
}
.codeBox {
  margin: 0.63rem 0.75rem;
  background: #ffffff;
  border-radius: 1.13rem;
  padding: 1.88rem 0 1.75rem 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  .code {
    width: 11.34rem;
    height: 11.47rem;
    .disable {
      opacity: 0.3;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tips {
    font-size: 0.88rem;
    color: #6e6e79;
    text-align: center;
    margin-top: 0.69rem;
  }
  .stxt{
    color: #6e6e79;
    font-size: 0.88rem;
  }
  .btn {
    width: 10.56rem;
    height: 2.5rem;
    background: #f15353;
    color: #ffffff;
    text-align: center;
    line-height: 2.5rem;
    margin-top: 0.91rem;
    border-radius: 1.25rem;
  }
}
</style>
